<template>
  <!-- 提现结算 提现审核 -->
  <div class="app-container jklis">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      class="zdy-form search-form-new"
      label-width="auto"
    >
    <el-form-item label="提现状态" prop="goodsId">
        <el-select
          v-model="queryParams.state"
          placeholder="请选择提现状态"
          size="small"
          clearable
          @change="searchList"
        >
          <el-option
            v-for="(dict, key) in commonMaps.tixianStateMap"
            :key="key"
            :label="dict.label"
            :value="key"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="提现时间" prop="">
        <el-date-picker
          v-model="timer"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          @change="searchList"
          size="small"
        >
        </el-date-picker>
      </el-form-item>
      
      <el-form-item label="申请人昵称" prop="applicantName">
        <el-input
          v-model="queryParams.applicantName"
          placeholder="请输入申请人"
          clearable
          size="small"
          @change="searchList"
        />
      </el-form-item>
      <el-form-item label="真实姓名" prop="applicantRealName">
        <el-input
          v-model="queryParams.applicantRealName"
          placeholder="请输入真实姓名"
          clearable
          size="small"
          @change="searchList"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="searchList"
          class="zdy-btn"
          >搜索</el-button
        >
        <el-button
          icon="el-icon-refresh"
          type="primary"
          plain
          size="small"
          @click="resetQuery"
          class="zdy-btn zdy-btn-refresh"
          >重置</el-button
        >
     
      </el-form-item>
    </el-form>
    <div class="zdy-main customTab">
          <el-table
            :data="tableData.records"
            border
            height="calc(100vh - 309px)"
            style="width: 100%"
          >
            <el-table-column
              prop="applicantName"
              label="申请人"
              min-width="120"
            ></el-table-column>
            <el-table-column
              prop="applicantRealName"
              label="真实姓名"
              min-width="120"
            ></el-table-column>
            <el-table-column prop="applicantTel" label="联系电话" min-width="120">
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="申请时间"
              min-width="120"
            ></el-table-column>
            <el-table-column
              prop="amount"
              label="提现金额"
              min-width="120"
            ></el-table-column>
            <el-table-column
              prop="createTime"
              label="账号类型"
              min-width="160"
            >
            <template slot-scope="scope">
                <span>{{
                  commonMaps.accountType[scope.row.accountType] || commonMaps.accountType["1"]
                }}</span
                ><br />
      
              </template>
          </el-table-column>
            <el-table-column
              prop="account"
              label="收款账号"
              min-width="160"
            ></el-table-column>
            <el-table-column
              prop="type"
              label="提现类型"
              min-width="100"
            >
            <template slot-scope="scope">
                <span v-show="scope.row.type==1">余额提现 </span>
                <span v-show="scope.row.type==2">保证金提现</span>
            </template>
          </el-table-column>
            <el-table-column prop="" label="提现状态" min-width="120">
              <template slot-scope="scope">
                <el-tag :type="commonMaps.tixianStateMap[scope.row.state].type">{{
                  commonMaps.tixianStateMap[scope.row.state].label
                }}</el-tag>
      
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" min-width="200">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  @click="openOrder(scope.row)"
                  v-if="scope.row.state==1"
                  >处理</el-button>
              </template>
            </el-table-column>
          </el-table>
    </div>
    <div class="pages-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[10, 20, 30, 40, 50, 60]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total"
      ></el-pagination>
    </div>
    <tixianSettling ref="tixianSettling"></tixianSettling>
  </div>
</template>

<script>
import myMoneyApi from "@/api/financeCenter/myMoney.js";
import tixianSettling from './components/tixianSettling.vue'
export default {
  name: "tixianSettle",
  components: {
    tixianSettling
  },
  data() {
    return {
      tableData: {
        records: [],
        total: 0,
      },
      btnLoading: false,
      loading: false,
      timer:[],
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        applicantTimeStart: null,
        applicantTimeEnd: null,
        state:'1',
        dataType:'all'
      }
    };
  },
  created() {
    this.getList();
  },
  activated() {},
  methods: {
   
  
    // 获取列表
    getList() {
      // queryParams 请求列表
      this.loading = true;
      if (this.timer && this.timer.length == 2) {
        this.queryParams.applicantTimeStart = this.timer[0] + " 00:00:00";
        this.queryParams.applicantTimeEnd = this.timer[1] + " 23:59:59";
      } else {
        this.queryParams.applicantTimeStart = "";
        this.queryParams.applicantTimeEnd = "";
      }
      myMoneyApi.withdrawalRecordList(this.queryParams).then((res) => {
        this.loading = false;
        this.tableData.records = res.rows;
        this.tableData.total = res.total;
      });
    },
    // 搜索
    searchList() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 打开处理提现的弹窗
    openOrder(order){
      this.$refs.tixianSettling.open(order)
    },
    // tabs切换时触发
    tabChange() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 20,
        applicantTimeStart: null,
        applicantTimeEnd: null,
        state:'1',
        dataType:'all'
      };
      this.getList();
    },
  
    // 每页条数改变
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    // 页码改变
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    exportOrder() {},
  },
};
</script>
<style lang="scss" scoped>
.link {
  color: blue;
  cursor: pointer;
}
</style>
